<template>
  <ui-container>
    <template #extra>
      <u-button type="primary" @click="handleOnClickToRuleGroupModelShow">
        新增
      </u-button>
    </template>
    <template #search>
      <u-form :schema="searchFormSchema" :dataSource="searchData">
        <template #footer>
          <u-button @click="handleOnClickToSearch" type="primary"
            >搜索</u-button
          >
        </template>
      </u-form>
    </template>

    <template #container>
      <a-table
        :columns="columns"
        :data-source="pageData"
        :rowKey="(record) => record.id"
        :pagination="pagination"
        :loading="loading"
        @change="handleOnChangeToLoadTable"
      >
        <template #ruleGroupType="{ text }">
          <a-tag v-if="text == 2" color="pink">管理组</a-tag>
          <a-tag v-if="text == 3" color="pink">注册组</a-tag>
        </template>
        <template #action="{ record }">
          <u-button
            type="link"
            title="编辑"
            @click="handleOnClickToEdit(record)"
            >编辑</u-button
          >
          <u-button
            type="link"
            title="删除"
            @click="handleOnClickToDelete(record.id)"
            >删除</u-button
          >
        </template>
      </a-table>
    </template>
  </ui-container>

  <a-modal
    v-model:visible="ruleGroupModelShow"
    :title="ruleGroupTitle"
    okText="提交"
    cancelText="关闭"
    onCancel="ruleGroupModelShow = !ruleGroupModelShow"
    @Ok="handleOnClickToRuleGroupSubmit"
  >
    <u-form
      :schema="ruleGroupFormSchema"
      :dataSource="ruleGroupForm"
      ref="ruleGroupForm"
    ></u-form>
  </a-modal>
</template>

<script>
import UIContainer from "basicLayoutComponent/UIContainer";
import UICLI from "components/ui-cli";
import { Button, Table, Tag, Modal } from "ant-design-vue";

import { PlusOutlined } from "@ant-design/icons-vue";
import ruleGroupIndex from "./index";

import {
  getRoleGroupPage,
  deleteRoleGroupById,
  getRoleGroupById,
  saveRoleGroup,
  updateRoleGroupById,
} from "@/access/api/role/index";

import { confirm, showMess, clearForm, set2Form} from "utils/Util";

export default {
  name: "RoleList",
  components: {
    UButton: UICLI.UButton,
    UForm: UICLI.UForm,
    ATable: Table,
    ATag: Tag,
    AModal: Modal,
    UiContainer: UIContainer,
    PlusOutlined,
  },
  data() {
    return {
      searchFormSchema: ruleGroupIndex.searchFormSchema,
      columns: ruleGroupIndex.columns,
      pageData: [],
      pagination: {},

      loading: false,

      searchData: {
        currentIndex: 1,
        ruleGroupoId: "",
      },

      ruleGroupData: [],
      ruleGroupForm: {
        id: '',
        ruleGroupName: '',
        ruleGroupType: ''
      },
      ruleGroupModelShow: false,
      ruleGroupTitle: "添加角色组",
      ruleGroupFormSchema: ruleGroupIndex.ruleGroupFormSchema,
    };
  },
  methods: {
    getRoleGroupPage() {
      this.loading = true;
      getRoleGroupPage(this.searchData).then((res) => {
        if (res) {
          this.loading = false;

          this.pageData = res.datas;

          const pagination = { ...this.pagination };
          pagination.total = res.pagination.totalCount;
          this.pagination = pagination;
        }
      });
    },
    handleOnChangeToLoadTable() {
      this.searchData.currentIndex = pagination.current;
      this.getRoleGroupPage();
    },
    handleOnClickToSearch() {
      this.getRoleGroupPage();
    },

    handleOnClickToDelete(id) {
      confirm(() => {
        deleteRoleGroupById({ id }).then((res) => {
          if (res) {
            showMess("角色组删除成功");
            this.getRoleGroupPage();
          }
        });
      }, "删除当前角色组将会删除其下所有角色，请谨慎操作");
    },

    handleOnClickToEdit(record) {
      clearForm(this.ruleGroupForm);

      this.ruleGroupTitle = "修改角色组";
      this.ruleGroupModelShow = true;

      set2Form(this.ruleGroupForm, record)

    },
    handleOnClickToRuleGroupModelShow() {
      this.ruleGroupModelShow = true;
      
      clearForm(this.ruleGroupForm);
    },
    handleOnClickToRuleGroupSubmit() {
      this.$refs.ruleGroupForm.$refs.form
        .validate()
        .then(() => {
          if (this.ruleGroupForm.id) {
            updateRoleGroupById(this.ruleGroupForm).then((res) => {
              if (res) {
                showMess("角色组修改成功");
                this.getRoleGroupPage();
                this.ruleGroupModelShow = false;
              }
            });
          } else {
            saveRoleGroup(this.ruleGroupForm).then((res) => {
              if (res) {
                showMess("角色组保存成功");
                this.getRoleGroupPage();
                this.ruleGroupModelShow = false;
              }
            });
          }
        })
        .error((error) => {
          console.log("error", error);
        });
    },
  },
  created() {
    this.getRoleGroupPage();
  },
};
</script>

<style lang="less" scoped>
</style>